<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随言碎语</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字">
                        </div>
                        <div class="layui-inline">
                            <button id="btnSearch" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                        </div>
                        <!--<div class="layui-inline">
                            <button id="addLink_btn" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                        </div>-->
                        <div class="layui-inline">
                            <button id="delAll_btn" class="layui-btn layui-btn-danger icon-btn">
                                <i class="layui-icon layui-icon-delete"></i>批量删除
                            </button>
                        </div>
                    </div>
                </div>
                <table class="layui-table" id="noteList" lay-filter="noteList"></table>
            </div>
        </div>
    </div>
    <!-- 表格操作列 -->
    <script type="text/html" id="tableBar">
        <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>-->
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="show">查看回复</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

 <!--   <script type="text/html" id="tableStateUser">
        <input type="checkbox" lay-filter="ckStateUser" value="{{d.newsStatus}}" lay-skin="switch"
            lay-text="正常|锁定" {{d.newsStatus==0?'checked':''}}/>
    </script>-->
    <!-- 留言表格操作列 -->
    <script type="text/html" id="messageBar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!-- 表单留言弹窗 -->
    <script type="text/html" id="messageList">
        <div class="layui-fluid">
            <table class="layui-table layui-hide" id="messageTable" lay-filter="messageTable"></table>
        </div>
    </script>
    <script src="../../../static/libs/layui/layui.js"></script>
    <script src="../../../static/js/common.js"></script>
    <script>
        layui.use(["form","layer","table","upload","admin"],function () {  
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var upload = layui.upload;
            var admin = layui.admin;
            var $ = layui.jquery;
            //渲染表格
            var insTb = table.render({
                elem: '#noteList',
                // url: '../../static/json/newsList.json',
                url : '/blogMessageController/getBlogMessage',
                page: true,
                cellMinWidth: 100,
                cols : [
                    [
                    {type: "checkbox", fixed:"left", width:50},
                    // {field: 'newsId', title: 'ID', width:60, align:"center"},
                    {field: 'fromName', title: '留言用户名称'},
                    {field: 'content', title: '内容', align:'center'},
                    {field: 'createTime', title: '发布时间', align:'center', minWidth:110, templet:"<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日,HH:mm:ss')}}</div>"},
                    {title: '操作', width:150, templet:'#tableBar',fixed:"right",align:"center"}
                ]
                ]
            });
             // 添加按钮点击事件
             $('#addLink_btn').click(function () {
                showEditModel();
            });
            // 修改用户状态
            form.on('switch(ckStateUser)', function (obj) {
                layer.load(2);
                $.get('../../static/json/ok.json', {
                    userId: obj.elem.value,
                    state: obj.elem.checked ? 0 : 1
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }, 'json');
            });
            // 批量删除
            $("#delAll_btn").click(function(){
                var checkStatus = table.checkStatus('noteList'),
                    data = checkStatus.data,
                    newsId = [];
                if(data.length > 0) {
                    for (var i in data) {
                        newsId.push(data[i].newsId);
                    }
                    layer.confirm('确定删除选中的分类？', {icon: 3,skin: 'layui-admin-skin',shade:0.1}, function (index) {
                        // $.get("删除文章接口",{
                        //     newsId : newsId  //将需要删除的newsId作为参数传入
                        // },function(data){
                            insTb.reload();
                        layer.close(index);
                        // })
                    })
                }else{
                    layer.msg("请选择需要删除的分类");
                }
            })
            // 工具条点击事件
            table.on('tool(noteList)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'show') { // 修改
                    showMessageModel(data.id);
                } else if (layEvent === 'del') { // 删除
                    doDel(data.id);
                }
            });
            // 删除
            function doDel(id) {
                layer.confirm('确定要删除当前数据吗？', {
                    skin: 'layui-admin-skin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.get('/blogMessageController/deleteBlogMessageById', {
                        id: id
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.success) {
                            layer.msg(res.msg, {icon: 1});
                            insTb.reload({}, 'data');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });
            }
            // 显示评论弹窗
            function showMessageModel(id) {
                layer.open({
                    type: 1,
                    skin: 'layui-admin-skin-w',
                    area: ['100%', '100%'],
                    scrollbar: false,
                    title: '查看回复',
                    content: $('#messageList').html(),
                    success: function (layero, dIndex) {
                        //渲染表格
                        var insTbMessage = table.render({
                            elem: '#messageTable',
                            url: '/blogMessageController/getBlogMessage',
                            where:{
                                id:id
                            },
                            page: true,
                            cellMinWidth: 100,
                            cols: [
                                [
                                    {type: "checkbox", fixed: "left", width: 50},
                                    // {field: 'newsId', title: 'ID', width:60, align:"center"},
                                    {field: 'fromName', title: '评论人', width: 350},
                                    {field: 'toName', title: '被评论人', align: 'center'},
                                    {field: 'content', title: '内容', align: 'center'},
                                    {
                                        field: 'createTime', title: '评论', align: 'center', minWidth: 110, templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日,HH:mm:ss')}}</div>"
                                    },
                                    {title: '操作', width: 100, templet: '#messageBar', fixed: "right", align: "center"}
                                ]
                            ]
                        });
                        // 列表操作
                        table.on('tool(messageTable)', function (obj) {
                            var layEvent = obj.event,
                                data = obj.data;
                            if (layEvent === 'del') { //删除
                                layer.confirm('确定删除此评论？', {icon: 3, title: '提示信息', shade: 0.1}, function (index) {
                                    $.get("/blogMessageController/deleteBlogMessageById", {
                                        id: data.id  //将需要删除的newsId作为参数传入
                                    }, function (data) {
                                        if (data.success){
                                            layer.msg(data.msg,{icon:1})
                                            insTbMessage.reload();
                                        } else {
                                            layer.msg(data.msg,{icon:2})
                                        }
                                        layer.close(index);

                                    })
                                });
                            }
                        });
                    }
                });
            }
        })
    </script>
</body>
</html>